import { Button } from 'antd'
import { useRef, useState } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import './index.less'
import TypeTree from '@/pages/components/type-tree/index.jsx'
import FlowStepList from '../components/flow-step-list.jsx'
import { flowStepConfig } from '@/utils/constant.js'
import { ContainerLayout, CommonTitle } from '@/components'

export const FlowStep = () => {
  const typeTreeRef = useRef()

  const [currentType, setCurrentType] = useState({})

  const onSelect = (type) => {
    setCurrentType(type)
  }
  const listRef = useRef()

  return (
    <>
      <div className="ant-page-header page-header flow-step-page">
        <div className="ant-page-header-content">
          <div className="layout-left top-bottom-layout">
            <div className='flex-row space-between'>
              <CommonTitle>流程步分类</CommonTitle>
              <Button className='icon-btn' type='text' size='small' title="新增顶级分类" icon={<PlusOutlined/>} onClick={() => typeTreeRef.current.addTopLevel()}></Button>
            </div>
            <ContainerLayout className="flex-1">
              <TypeTree ref={typeTreeRef} typeCode="2" onSelect={onSelect} />
            </ContainerLayout>
          </div>
          <div className="layout-right top-bottom-layout">
            <div className='flex-row space-between'>
              <CommonTitle type="large">
                {currentType && currentType.id
                  ? `【${currentType.name || ''}】流程步配置`
                  : '流程步配置'}
              </CommonTitle>
              <Button className='icon-btn' type='text' size='small' title="新增流程步" icon={<PlusOutlined/>} onClick={() => listRef.current.addFlowStep()}></Button>
            </div>
            <ContainerLayout className="flex-1">
              <FlowStepList
                ref={listRef}
                config={flowStepConfig}
                type={currentType}
              />
            </ContainerLayout>
          </div>
        </div>
      </div>
    </>
  )
}

export default FlowStep
